import React from 'react';
import './App.css';
import './assets/font/iconfont.css';
import Home from './project/home'  //导入home组件
import Order from './project/order'
import Cart from './project/cart'
import Mine from './project/mine'

import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom'; //引入路由

function App() {
    return (
        <div className="content">
            <BrowserRouter>
                {/* 渲染 */}
                <Routes>
                    {/* 路由出口 */}
                    <Route path="/" element={<Home/>}></Route>
                    <Route path="/order" element={<Order/>}></Route>
                    <Route path="/cart" element={<Cart/>}></Route>
                    <Route path="/mine" element={<Mine/>}></Route>
                </Routes>

                <div>
                    <div className="footer"></div>
                    <div className="footer-seat">
                        <div className="footer-lists">
                            <ul>
                                <li>
                                    <NavLink to="/" className={({isActive}) => isActive ? 'selected' : ''}>
                                        <i className="iconfont icon-zhuye"></i>
                                        <span>首页</span>
                                    </NavLink>
                                </li>

                                <li>
                                    <NavLink to="/order" className={({isActive}) => isActive ? 'selected' : ''}>
                                        <i className="iconfont icon-dingdan-"></i>
                                        <span>订单</span>
                                    </NavLink>
                                </li>

                                <li>
                                    <NavLink to="/cart" className={({isActive}) => isActive ? 'selected' : ''}>
                                        <i className="iconfont icon-gouwuche"></i>
                                        <span>购物车</span>
                                    </NavLink>
                                </li>

                                <li>
                                    <NavLink to="/mine" className={({isActive}) => isActive ? 'selected' : ''}>
                                        <i className="iconfont icon-My"></i>
                                        <span>我的</span>
                                    </NavLink>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </BrowserRouter>
        </div>
    )
}

export default App;
